<template>
	<view class="product-wrapper" @click="onTo">
		<!-- 左上角的插槽，内容交给父组件来自定义 -->
		<view class="top-left">
			<slot name="topLeft"></slot>
		</view>
		<!-- 商品图 -->
		<image class="product-img" lazy-load="true" mode="scaleToFill"
			:src="getFirstImg(productObj.productImage || productObj.image || productObj.imageSrc || productObj.src)">
		</image>

		<!-- 商品名区域 -->
		<view class="productName-area plr20">
			<text class="product-name">{{ productObj[productNameKey] }}</text>
			<view class="re_zu_name re_zu_name_first">
				<text class="re_zu_name_text">{{productObj.labelStr || '优选好物'}}</text>
			</view>
		</view>
		<!-- 最底部的商品价格区域 -->
		<view>
			<view class="price-area plr20">
				<view class="left">
					<text class="m">¥</text>
					<text
						class="l">{{ getPartMoney1(true, productObj.sale || productObj.lowestsalePrice || productObj.price || productObj.lowestSalePrice) }}</text>
					<text class="d">.</text>
					<text
						class="r">{{ getPartMoney1(false, productObj.sale || productObj.lowestsalePrice || productObj.price || productObj.lowestSalePrice) }}/元</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 商品组件
	import {
		OLD_NEW_MAP,
		EMPTY_PLACEHOLDER,
		APP_APPID
	} from '../../utils/constant.js';
	import {
		getVipType
	} from '../../utils/index';

	export default {
		name: 'productItem',

		props: {
			productObj: {
				type: Object,
				default: {}
			}, // 商品描述对象
			showXinjiu: {
				type: Boolean,
				default: true
			}, // 是否在商品名的前面显示新旧程度
			showTag: {
				type: Boolean,
				default: false
			}, // 是否在商品名的下一行显示商品标签

			//判断瀑布流
			isWaterfallFlow: {
				type: Boolean,
				default: true
			},
			productNameKey: {
				type: String,
				default: 'name'
			} // 商品名所对应的字段名称
		},

		data() {
			return {
				cl: 'fcc',
				appid: APP_APPID
			};
		},
		mounted() {
			console.log('productObj================', this.productObj);
		},
		methods: {
			getFirstImg(imgsStr) {
				return imgsStr.split(',')[0]
			},
			salesVolume(productObj) {
				//console.log('salesVolume',productObj)
				if (!productObj.salesVolume) {
					return 369 + 1;
				} else {
					return productObj.salesVolume + 399 + (productObj.indexSort || 0);
				}
			},
			/**
			 * 获取新旧程序的标识
			 */
			getOldNewText() {
				const level = this.productObj.oldNewDegree; // 新旧程度标识

				return OLD_NEW_MAP[level] || EMPTY_PLACEHOLDER;
			},
			//跳转商品页
			onTo() {
				this.$onTo(
					`/pagesClass-rich/product/product?productId=${this.productObj.productId || this.productObj.itemId}`
					);
			},
			getVipMoney(isFront) {
				let price = String(this.productObj.price || this.productObj.lowestSalePrice || this.productObj.minPrice ||
					'');
				price = (price * 0.5).toFixed(2);
				if (!price) return EMPTY_PLACEHOLDER;
				const list = price.split('.');
				const result = isFront ? list[0] : list[1];
				return result || 0;
			},
			/**
			 * 获取金额的小数点前、后的数据
			 * @param {Boolean} isFront : 是否是前半部分
			 */
			getPartMoney(isFront) {
				let price = String(this.productObj.price || this.productObj.lowestSalePrice || this.productObj.minPrice ||
					''); // 接口返回的价格不一定是字符串，所以这里做一个强制转换
				//   if(getVipType()==1){
				// console.log("价格+"+(price*0.5).toFixed(2));
				// price = (price*0.5).toFixed(2)
				//   }

				if (!price) return EMPTY_PLACEHOLDER;
				const list = price.split('.');
				const result = isFront ? list[0] : list[1];
				return result || 0;
			},

			//购买模式商品
			getPartMoney1(isFront, price) {
				let zuqiDay=this.productObj.dayList[0].day
				const _price = (price / zuqiDay).toFixed(2) || '';
				if (!_price) return EMPTY_PLACEHOLDER;
				const list = _price.toString().split('.');
				const result = isFront ? list[0] : list[1];
				return result || 0;


				return
				// const _price = price || '';
				// if (!_price) return EMPTY_PLACEHOLDER;
				// const list = _price.toString().split('.');
				// const result = isFront ? list[0] : list[1];
				// return result || 0;
			},

			/**
			 * 判断是否显示商品标签列表数据，即取决于父组件props，也取决于是否存在数据
			 */
			checkIsShowTagList() {
				const labels = this.productObj.labels;
				return this.showTag && labels && labels.length;
			}
		}
	};
</script>

<style lang="scss">
	.product-wrapper {
		background: #ffffff;
		border-radius: 10rpx;
		position: relative;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.1);

		.top-left {
			position: absolute;
			z-index: 3;
		}

		.plr20 {
			padding-left: 15rpx;
			box-sizing: border-box;
		}

		.product-img {
			width: 100%;
			height: 320rpx;
			background: #ffffff;
		}

		.productName-area {
			display: flex;
			flex-direction: column;
			overflow: hidden;
			margin-bottom: 10rpx;

			.product-name {
				font-size: 26rpx;
				font-weight: 600;
				color: #333333;
				font-family: Arial;
			}

			.re_zu_name {
				display: inline-block;
				color: #4a3827;
				font-size: 24rpx;
				font-weight: 600;
				margin-top: 10rpx;
				transform: scale(0.9);
				transform-origin: 0% 0%;

				.re_zu_name_text {
					display: inline-block;
				}
			}
		}

		.bottomTag {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.tagItem {
				height: 35rpx;
				line-height: 35rpx;
				border-radius: 5rpx;
				border: 1px solid #e52021;
				font-size: 22rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #e52021;
				padding: 0 4rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.price-area {
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			justify-content: space-between;

			.left {
				color: #e52021;

				.m {
					font-size: 20rpx;
					margin-right: 6rpx;
				}

				.l {
					font-size: 38rpx;
					font-weight: 500;
				}

				.d {
					font-size: 36rpx;
				}

				.r {
					font-size: 20rpx;
					font-weight: 500;
				}
			}

			.right {
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-bottom: 3rpx;
			}
		}
	}
</style>